<template>
  <div fluid grid-list-md class="agent-query-container">
    <v-layout row wrap align-content-start>
       <v-flex md12>
        <v-btn icon class="mx-1" @click="$router.push('/activity/bonusrecord')">
          <v-icon>keyboard_backspace</v-icon>
         </v-btn>

         <span class="title ml-4">玩家「{{nickname}}」活动期间砸蛋记录详情</span>
      </v-flex>
      <v-flex d-flex md12 sm12 xs12 class="overflow-table-custom">
        <!-- 查询数据表格 -->
        <div class="table-container pos-abs ">
          <v-data-table
            hide-actions
            :loading="showProgress"
            :headers="headers"
            :items="tableData"
             class="elevation-1 bonus-detail-table"
          >
            <v-progress-linear slot="progress" color="teal" height="5" indeterminate></v-progress-linear>
            <template slot="items" slot-scope="props">
              <td width="4%" class="text-xs-center subheading">{{ props.item.lftid }}</td>
              <td width="4%" class="text-xs-center">
                <v-avatar size="36">
                  <img :src="props.item.headUrl" alt="头像">
                </v-avatar>
              </td>
              <td width="4%" class="text-xs-center subheading">{{ props.item.nickname }}</td>
              <td width="4%" class="text-xs-center subheading">{{ props.item.used }}</td>
              <td width="4%" class="text-xs-center subheading">{{ props.item.dused }}</td>
              <td width="4%" class="text-xs-center subheading">{{ props.item.card }}</td>
              <td width="4%" class="text-xs-center subheading">{{ props.item.red }}</td>
              <td width="4%" class="text-xs-center subheading">{{ props.item.amount }}</td>
              <td width="4%" class="text-xs-center subheading">{{ props.item.update }}</td>
              <td width="54%" class="text-xs-center subheading">
                <v-btn
                      flat
                      round
                      dark
                      color="indigo darken-1"
                      class="mx-1"
                      @click="gotoCardDetail"
                    >
                      <span class="mx-1">卡片详情</span>
                      <v-icon color="indigo darken-1">card_membership</v-icon>
                    </v-btn>
                <v-btn
                      flat
                      round
                      dark
                      color="red darken-1"
                      class="mx-1"
                      @click="gotoRedpacketDetail"
                    >
                      <span class="mx-1">红包详情</span>
                      <v-icon color="red darken-1">email</v-icon>
                    </v-btn>
                <v-btn
                      flat
                      round
                      dark
                      color="orange darken-1"
                      class="mx-1"
                      @click="gotoCardRecord"
                    >
                      <span class="mx-1">卡片赠送记录</span>
                      <v-icon color="orange darken-1">receipt</v-icon>
                    </v-btn>
              </td>
              
            </template>
            <!-- 没有数据时显示的提示 -->
            <template slot="no-data">
              <div class="text-md-center">
                <v-icon color="yellow darken-3">warning</v-icon>
                <span class="subheading">暂无数据</span>
              </div>
            </template>
          </v-data-table>
          <!-- 表格分页 -->
          <div class="text-xs-center my-2">
            <v-pagination
              @input="pageChange"
              circle
              :length="pagination.pageCount"
              :total-visible="pagination.totalVisible"
              v-model="pagination.page"
            ></v-pagination>
          </div>
        </div>
      </v-flex>
    </v-layout>
  </div>
</template>

<script>
import { bonus } from "../../api/activity";
import { mapMutations } from "vuex";
export default {
  data: () => ({
    showProgress: false,
    limit: 10,
    offset: 0,
    dialog: false,
    isSearch: false,
    nickname: '',
    pagination: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
    // 实际发送查询条件
    form: {
      fromTime: "",
      toTime: "",
      lftid: "",
      nickname: "",
      superId: "",
      limit: 10,
      offset: 0,
      realName: ""
    },
    tableData: [],
    headers: [
      { text: "玩家ID", value: "lftid", align: "center", sortable: false, width:"4%" },
      { text: "头像", value: "headUrl", align: "center", sortable: false, width:"4%" },
      { text: "昵称", value: "nickname", align: "center", sortable: false, width:"4%" },
      { text: "已砸蛋次数", value: "done", align: "center", sortable: false, width:"4%" },
      { text: "剩余砸蛋次数", value: "superId", align: "center", sortable: false, width:"4%" },
      { text: "砸蛋获得卡片数", value: "superId", align: "center", sortable: false, width:"4%" },
      { text: "砸蛋获得红包数", value: "superId", align: "center", sortable: false, width:"4%" },
      { text: "砸蛋获得钻石数", value: "amount", align: "center", sortable: false, width:"4%" },
      { text: "管理员修改卡片数量", value: "amount", align: "center", sortable: false, width:"4%" },
      { text: "操作", value: "superId", align: "center", sortable: false, width:"54%" },
    ],
    editedIndex: -1,
    editedItem: {
      uid: "",
      name: "",
      headUrl: 0,
      lftid: 0,
      nickname: 0,

    },
    uid: ''
  }),
  mounted() {
    this.$nextTick(() => {
      $Vue.$off("refreshPage");
      $Vue.$on("refreshPage", () => {
        this.refresh();
      });
      $Vue.$off("areaCodeChange");
      $Vue.$on("areaCodeChange", () => {
        this.refresh();
      });
    });
    // this.initialize();

    this.nickname = this.$route.query.name;
    this.uid = this.$route.query.uid;
    this.getBonusRecordDetail();
  },
  methods: {
    refresh() {
      this.isSearch = false;
      this.offset = 0;
      this.chipSelected = 1;

      this.pagination.page = 1;
      this.getBonusRecordDetail();
    },
    // 获取代理列表
    getBonusRecordDetail() {
      const qs = {
        limit: this.limit,
        offset: this.offset,
        uid: this.uid
      };
      this.showProgress = true;
      bonus.getBonusRecordDetail.r(qs).then(({ data }) => {
        console.log('getBonusRecordDetail', data)
        if (data.result === 0) {
          if (data.data) {
            let rankData = data.data;
            this.tableData = [rankData];
            this.pagination.pageCount = data.data.totalRow
              ? Math.ceil(data.data.totalRow / this.limit)
              : 1;
          }
        } else {
          $Vue.$emit("toggleSnackbar", {
            text: data.message
          });
        }
        this.showProgress = false;
      });
    },
    initialize() {
      this.tableData = [
        {
          headUrl: "https://countryflags.io/cn/flat/32.png",
          lftid: 103214,
          nickname: "搭街坊",
          superId: 16,
          createTime: "2018-4-19",
        }
      ];
    },
    gotoCardDetail() {
      this.$router.push(`/activity/cardmag?uid=${this.uid}&name=${this.nickname}&from=bonusrecord&tabs=1`)
    },
    gotoRedpacketDetail() {
      this.$router.push(`/activity/redpacketdetail?uid=${this.uid}&name=${this.nickname}&from=bonusrecord`)
    },
    gotoCardRecord() {
      this.$router.push(`/activity/cardmag?uid=${this.uid}&name=${this.nickname}&from=bonusrecord&tabs=2`)
    },
    pageChange(page) {
      this.offset = (page - 1) * this.limit;
      if (!this.isSearch) {
        this.getBonusRecordDetail();
      } else {
        // ***
        this.search("wyvj");
      }
    }
  }
};
</script>
<style lang="less" scoped>
.bonus-detail-table {
  td, tr {
    padding: 6px 0!important;
  }
}
// md
@media all and (max-width: 1600px) {
  .overflow-table-custom {

    overflow-x: scroll;
    overflow-y: hidden;
    position: relative;
  }
}

</style>